<template>
	<view class="page">
		<view class="logo">
			<image src="../../static/img/login/logo.png"></image>
			<view class="appName"> 知阅学堂</view>
		</view>
		<view class="loginForm">
			<view class="formItem">
				<image src="../../static/img/login/zhanghao.png"></image><text class="bold">账号</text>
				<input v-model="account" type="text" placeholder-class="cb8b fpt32" placeholder="请输入您的账号">
			</view>
			<view class="formItem">
				<image src="../../static/img/login/mima.png"></image><text class="bold">密码</text>
				<input v-model="password" type="text" password="true" placeholder-class="cb8b fpt32" placeholder="请输入您的密码">
			</view>
			<view class="formItem" style="z-index: 2;">
				<image src="../../static/img/login/jigou.png"></image><text class="bold">机构代码</text>
				<!-- <input v-model="orgcode" type="text" placeholder-class="cb8b fpt32" placeholder="请输入机构代码"> -->
				<view style="padding-left: 70rpx;padding-top: 20rpx;">
					<autocomplete v-model="orgcode" class-name="orgcodeInput" key-value="orgcodeLabel" :fetch-suggestion="fetchHandler" placeholder="请输入机构代码"></autocomplete>
				</view>
			</view>
			<view class="formItem">
				<image src="../../static/img/login/yanzhengma.png"></image><text class="bold">验证码</text>
				<view class="valicode">
					<input v-model="valicode" type="text" password="true" placeholder-class="cb8b fpt32" placeholder="请输入验证码">
					<image :src="valiUrl" mode="" @click="getValicode"></image>	
				</view>
			</view>
			<view style="margin-top: 30px;"><cos-button @sure="toLogin"></cos-button></view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import JSencrypt from '../../common/js/wx_rsa_min.js'
	import { bindUser, loginKey, queryOrgCode, valiCode, readerLogin} from '../../common/api/user.js'
	import cosButton from '@/components/cos-btn.vue'
	import autocomplete from '../../components/autocomplete'
	export default{
		components: { cosButton, autocomplete },
		data(){
			return {
				orgcode: '',
				account: '',
				password: '',
				valicode: '',
				valiUrl: '',
				guid: ''
			}
		},
		mounted(){
			this.getValicode()
		},
		methods:{
			...mapMutations(['login']),
			async fetchHandler(keyword, cb){
				const res = await queryOrgCode({orgcode: keyword, index: 1, pageSize: 6})
				const arr = res.data ? res.data : []
				arr.forEach(e=>{
					e.orgcodeLabel = `${e.orgcode}(${e.name})`
					return e
				})
				cb(arr)
			},
			async getValicode(){
				const res = await valiCode()
				if(res.code === 0){
					this.valiUrl = 'data:image/jpg;base64,' + res.image
					this.guid = res.guid
				}
				
			},
			async toLogin(){
				if(this.account === ''){
					uni.showToast({
						title: '请填写账号',
						icon: 'none'
					});
					return
				}
				if(/[^0-9a-zA-Z_\s]/.test(this.account)){
					uni.showToast({
						title: '账号只支持由数字、字母、下划线组成',
						icon: 'none'
					});
					return
				}
				if(this.password === ''){
					uni.showToast({
						title: '请填写密码',
						icon: 'none'
					})
				}
				if(this.orgcode === ''){
					uni.showToast({
						title: '请填写机构代码',
						icon: 'none'
					})
				}
				if(this.valicode === ''){
					uni.showToast({
						title: '请填写验证码',
						icon: 'none'
					})
				}
				const jsencrypt = new JSencrypt()
				const publicKey = (await loginKey()).data
				jsencrypt.setPublicKey(publicKey)
				let data = {
					readercode: this.account.trim(),
					orgcode: this.orgcode.trim().replace(/\(.*\)/, ''),
					password: jsencrypt.encrypt(this.password),
					validateguid: this.guid,
					validatecode: this.valicode
				}
				readerLogin(data).then(res=>{
					if(res.code === 10026){
						uni.showModal({
							title: '错误',
							content: res.msg,
							showCancel: false
						});
						return
					}
					this.login(res)
					// this.getMyNewTaskCount()
					//缓存账号密码
					const account = {
						orgcode: this.orgcode.trim(),
						uid: this.account.trim(),
						password: this.password
					}
					this.saveAccountInfo(account)
					if(this.option && this.option.backurl){
						const url = this.option.backurl
						uni.navigateTo({url})
					}else{
						uni.navigateTo({
							url:`/pages/book/index?token=${res.token}&departmentid=${res.departmentid}&organizationid=${res.organizationid}&keyid=${res.id}`
						})
					}
				}).catch(err=>{
					console.log('err')
					console.log(err)
					this.getValicode()
				})
			    
			},
			saveAccountInfo(data){
				uni.setStorageSync('accountInfo', data)
			}
		}
	}
</script>

<style lang="scss">
@import "../../common/style/public.css";
.page{
	width: 100%;
	.logo{
		text-align: center;
		padding-top: 20rpx;
		image{
			width: 232rpx;
			height: 232rpx;
		}
		.appName{
			font-size: 52rpx;
			color: #000000;
		}
	}
	.loginForm{
		margin-top: 52rpx;
	}
	.formItem{
		margin-left: 60rpx;
		margin-right: 60rpx;
		margin-bottom: 8px;
		padding-bottom: 8px;
		position: relative;
		line-height: 48rpx;
		border-bottom: 1px solid #E7E7E7;
		font-size: 36rpx;
		image{
			width: 48rpx;
			height: 48rpx;
			margin-right: 20rpx;
			vertical-align: top;
		}
		input{
			margin-top: 22rpx;
			margin-left: 64rpx;
			font-size: 30rpx;
		}
	}
	.valicode{
		position: relative;
		image{
			position: absolute;
			z-index: 2;
			width: 40%;
			height: 100%;
			right: 0;
			top: 0;
			background-color: #c4c4c4;
		}
	}
	.forget{
		margin-top: 40rpx;
	}
	.footer{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 30rpx;
	}
}
.shielder{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.4);
	z-index: 100;
	padding: 300rpx 30rpx;
	.testCard{
		text-align: center;
		color: #ffffff;
		position: relative;
		padding: 0 30rpx;
		height: 700rpx;
		border-radius: 16rpx;
		background-image: linear-gradient(rgba(87,205, 252,1), rgba(34,116,255,1));
		image{
			width: 362rpx;
			height: 152rpx;
			position: absolute;
			top: -152rpx;
			left: 168rpx;
		}
		.cardTitle{
			font-size: 40rpx;
			color: #ffffff;
			padding-top: 40rpx;;
		}
		.cardContent{
			margin-top: 30rpx;
		}
		.grade{
			position: relative;
			margin-top: 28rpx;
			border: 1px solid #73B7FF;
			border-radius: 16rpx;
			width: 630rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 28rpx;
			image{
				position: absolute;
				width: 20rpx;
				height: 34rpx;
				top: 32rpx;
				left: auto;
				right: 34rpx;
				transition: all 0.3s;
			}
			.gradeActive{
				transform: rotate(90deg);
			}
			.selected{
				color: #ffffff;
				font-size: 28rpx;
				text-align: left;
				text-indent: 20rpx;
			}
			.options{
				position: absolute;
				width: 100%;
				line-height: 60rpx;
				text-align: left;
				text-indent: 20rpx;
				left: 0;
				top: 104rpx;
				border: 1px solid #73B7FF;
				transform: scaleY(0);
				background: rgba(60, 160, 253,1);
				.option{
					color: #ffffff;
					font-size: 28rpx;
				}
				.actOption{
					background: #ffffff;
					color: #2C95F8;
				}
			}
			.optionsToggle{
				max-height: none;
				transform: scaleY(1);
			}
		}
		.challenge{
			display: inline-block;
			font-size: 34rpx;
			width: 534rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
			background: #ffffff;
			color: #2C95F8;
			margin-top: 60rpx;
		}
		.putOff{
			font-size: 34rpx;
			margin-top: 60rpx;
		}
	}
}
.orgcodeInput{
	.autocomplete-option{
		left: 64rpx;
		width: 502rpx!important;
	}
}
</style>